<template>
  <view class="comp-b">
    <text>子组件B</text>
    <view>CompA组件传进来的值：{{ compAValue }}</view>
    <view class="input-area">
      <text>回传值：</text>
      <input v-model="returnValue" class="input" />
    </view>
    <button @click="returnToParent">回传</button>
  </view>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';

const props = defineProps({
  compAValue: {
    type: String,
    required: true
  }
});
const emit = defineEmits(['return-to-parent']);
const returnValue = ref('');

const returnToParent = () => {
  emit('return-to-parent', returnValue.value);
};
</script>

<style scoped>
.comp-b {
  background-color: #74c69d;
  padding: 20rpx;
  margin: 20rpx 0;
}
.input-area {
  display: flex;
  align-items: center;
  margin: 10rpx 0;
}
.input {
  flex: 1;
  height: 60rpx;
  border: 1rpx solid #ccc;
  padding: 0 10rpx;
  background-color: #eee;
}
button {
  margin-top: 10rpx;
  background-color: #fff;
  color: #333;
  border: none;
  border-radius: 8rpx;
  padding: 10rpx;
}
</style>